<template>
	<view class="box">
		<view class="card" v-if="id && info">
			<view class="card-t">
				<view class="card-img">
					<image :src="info.list.img" mode="aspectFill"></image>
				</view>
				<view class="card-rig">
					<view class="card-rig-t">
						<view class="card-rig-t-title">{{ info.list.title }}</view>
						<view class="card-rig-t-tx">共{{ info.video.length || 0 }}集</view>
					</view>
					<view class="card-rig-c">分类：{{ getClssName(info.list.classification) }}</view>
					<view class="card-rig-t-price">￥{{ info.list.price }}</view>
				</view>
			</view>
			<view class="card-f">
				简介：{{ info.list.content }}
			</view>
		</view>
		<view class="form">
			<view class="form-title">标题</view>
			<view class="form-input">
				<input type="text" v-model="form.title" />
			</view>
		</view>
		<view class="form">
			<view class="form-title">上传封面</view>
			<view class="form-input upload">

				<view class="upload-item-img" v-if="form.img" @click="selectClick('图片')">
					<image :src="form.img" mode="aspectFill"></image>
				</view>
				<view class="upload-item-add" @click="selectClick('图片')" v-else>
					<image :src="ossUrl + '/static/image/5.png'" mode=""></image>
				</view>

			</view>
		</view>
		<view class="form">
			<view class="form-title">选择分类</view>
			<view class="form-input radio">
				<view :class="it.id == form.classification ? 'radio-item radio-item-ac' : 'radio-item' "
					v-for="(it,index) in classList" @click="setClassId(it.id)">{{it.name}}</view>
			</view>
		</view>
		<view class="form">
			<view class="form-title">修改简介</view>
			<view class="form-input textarea">
				<textarea placeholder="在这填写简介" placeholder-class="textarea-ac" v-model="form.content"></textarea>
			</view>
		</view>
		<view class="form">
			<view class="form-title">修改价格 </view>
			<view class="form-input price">
				<view class="price-input">
					<input type="number" v-model="form.price" />
					元
				</view>

			</view>
		</view>
		<view class="form" v-if="id > 0">
			<view class="form-title">上传视频</view>
			<view class="form-input upload">
				<view class="upload-item-add" @click="selectClick('视频')">
					<image :src="ossUrl + '/static/image/5.png'" mode=""></image>
				</view>
				<!-- <view class="upload-item-video">
					<video src=""></video>
				</view> -->
			</view>
		</view>
		<!-- <view class="video" v-if="video.length > 0">
			<view class="video-title">
				<view class="video-title-l">视频集</view>
				<view class="video-title-r">
					<view class="video-title-r-nums">已上传4个视频</view>
					<view class="video-title-r-upload">继续上传</view>
				</view>
			</view>
			<view class="video-list">
				<view class="video-list-item" v-for="(it,index) in video">
					<view class="video-list-item-img">
						<image src="/static/图层 2.png" mode="aspectFill"></image>
					</view>
					<view class="video-list-item-rig">
						<view class="video-list-item-rig-t">
							高尔夫训练d askjda nsm,zxcn 的看了几阿斯顿你们自行车；里的公开声明， 你下次，在那是简单快乐拉萨大家卡拉省的
						</view>
						<view class="video-list-item-rig-footer">
							<view class="video-list-item-rig-footer-l">
								<view class="video-list-item-rig-c">分类：教学</view>
								<view class="video-list-item-rig-t-price">￥10</view>
							</view>
							<view class="video-list-item-rig-footer-r">设置</view>
						</view>

					</view>
				</view>
			</view>
		</view> -->
		<view class="edit" style="margin-bottom: 50rpx;" v-if="video.length > 0">
			<view class="edit-title">视频集</view>
			<view class="edit-list" v-for="(it,index) in video">
				<view class="edit-list-c">
					<view class="edit-list-c-num">{{index + 1}}</view>
					<view class="video-list-item-img">
						<image :src="it.url + '?x-oss-process=video/snapshot,t_0,f_jpg,w_360'" mode="aspectFill"></image>
					</view>
					<view class="edit-list-c-r">
						<view class="edit-list-c-r-header">
							<view class="edit-list-c-r-header-l">{{it.title || ''}}</view>
							<view class="edit-list-c-r-header-edit" @click="toEdit(it)">修改</view>
							<view class="edit-list-c-r-header-edit edit-list-c-r-header-del" @click="del(it)">删除</view>
						</view>
						<view class="edit-list-c-r-time">视频时长: {{formatTime(it.duration)}}</view>
					</view>
				</view>
				<view class="edit-list-footer">
					<view>
						<image :src="ossUrl + `/static/image/g.png`" mode=""></image>
						{{it.type === 2 ? '分享解锁' : '免费'}}
					</view>
				</view>
			</view>
		</view>
		<view class="btns" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		InformationCourseClassification,
		InformationAddCourse,
		InformationCourseDetails,
		InformationAddVideo,
		InformationDelVideo,
		InformationGetPrice
	} from '@/common/http/api.js'
	import {
		uploadImg,
		uploadVideo,
		uploadDel
	} from '@/common/upload.js'
	export default {
		data() {
			return {
				id: '', //有则代表编辑
				classList: [],
				form: {
					title: '',
					img: '',
					content: '',
					price: '',
					classification: ''
				},
				video: [],
				info: '',
				min: 0,
				max: 0,
				name: '',
				circle_id: ''
			};
		},
		
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
			if(e.circle_id) {
				this.circle_id = e.circle_id
			}
			//分类
			InformationCourseClassification({circle_id:this.circle_id}).then(res => {
				this.classList = res.data
			})
			InformationGetPrice().then(res=>{
				this.min = res.data.min
				this.max = res.data.max
				this.name = res.data.name
			})
		},
		onShow() {
			
			this.init()
		},
		methods: {
			del(it) {
				uni.showModal({
					title: '',
					content: '请确认是否删除？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#12B475',
					success: res => {
						if (res.confirm) {
							let data = {
								id: it.id,
								course_id: this.id
							}
							uni.showLoading()
							InformationDelVideo(data).then(res => {
								this.init()
							}).finally(e => {
								uni.hideLoading()
							})
						}
					}
				});
			},
			toEdit(it) {

				uni.navigateTo({
					url: '/pagesA/managementCourses/fb?id=' + it.id
				})
			},
			formatTime(seconds) {
				// 检查参数是否为数字，如果不是或者是NaN，则使用默认值0
				if (typeof seconds !== 'number' || isNaN(seconds)) {
					seconds = 0;
				}

				// 计算分钟和秒数
				let minutes = Math.floor(seconds / 60);
				let remainingSeconds = seconds % 60;

				// 将分钟和秒数转换为两位数的字符串
				let minutesStr = String(minutes).padStart(2, '0');
				let secondsStr = String(remainingSeconds).padStart(2, '0');

				// 返回格式化后的时间字符串
				return `${minutesStr}:${secondsStr}`;
			},
			getClssName(id) {
				let name = ''
				try {
					name = this.classList.find(i => i.id == id).name
				} catch (e) {

				}
				return name
			},
			init() {
				uni.showLoading()
				InformationCourseDetails({
					id: this.id
				}).then(res => {
					if(res.data.list){
						this.form.id = res.data.list.id
						this.form.title = res.data.list.title
						this.form.img = res.data.list.img
						this.form.content = res.data.list.content
						this.form.price = res.data.list.price
						this.form.classification = res.data.list.classification
					}
	
					this.video = res.data.video
					this.info = res.data
					
					if(this.$store.state.videoMask){
						this.form.img = this.$store.state.videoMask
						this.$store.commit('setVideoMask', '')
					}
					
				}).finally(e => {
					
					uni.hideLoading()
				})
			},
			setClassId(id) {
				this.form.classification = id
			},
			// 上传
			selectClick(e) {
			
				if (e === '图片') {
					// uploadImg().then(res => {
					
					// 	this.form.img = res.data.url
					// 	console.log(res.data.url)
					// })
					uni.navigateTo({
						url: '/pagesC/clipper/clipper?w=' + 480 + '&h=' + 280 + '&type=5'
					})	
					
				} else {
					uploadVideo().then(res => {
						
						//this.fileList = [...this.fileList, res.data]
						this.addRequestVideo(res.data)
					})
				}
			},
			// 新增
			addRequestVideo(res) {
				let data = {
					course_id: this.id,
					title: '',
					duration: res.duration,
					url: res.url
				}
				uni.showLoading({
					mask: true
				})
				InformationAddVideo(data).then(res => {
					this.init()
				}).finally(e => {
					uni.hideLoading()
				})
			},
			//提交视频
			async submit() {
				if(!this.form.classification){
					uni.showToast({duration:3000,
						title:"请选择视频分类",
						icon:"none"
					})
					return
				}
				
				await this.$mValidate(
					[{
							require: true,
							key: 'title',
							message: '请输入标题'
						},
						{
							require: true,
							key: 'img',
							message: '请上传封面'
						},
						{
							require: true,
							key: 'content',
							message: '请填写简介'
						},
						{
							require: true,
							key: 'price',
							message: '请输入价格'
						}
					], this.form)
		
				// if(Number(this.form.price) < Number(this.min) || Number(this.form.price) > Number(this.max)){
				// 	uni.showToast({duration:3000,
				// 		title: '请输入正确范围价格！',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				let data = {
					...this.form,
					circle_id: this.circle_id
				}
				uni.showLoading({
					mask: true
				})
				InformationAddCourse(data).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: '保存成功！',
						icon: 'none'
					})
					this.id = res.data.id
					setTimeout(()=>{
						if(this.video.length > 0) {
							uni.navigateBack()
						} else {
							this.init()
						}
						
					},1500)
					
					//uni.navigateBack()
				})
			}
		},
	};
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.box {
		padding: 30rpx 0;
	}

	.card {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		padding: 22rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.card-t {
			width: 100%;
			display: flex;
			margin-bottom: 34rpx;

			.card-img {
				width: 240rpx;
				height: 140rpx;
				margin-right: 20rpx;
			}

			.card-rig {
				flex: 1;
				min-width: 0;

				.card-rig-t {
					display: flex;
					margin-bottom: 20rpx;

					.card-rig-t-title {
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 28rpx;
						color: #131313;
						flex: 1;
						min-width: 0;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.card-rig-t-tx {
						width: 100rpx;
						height: 23rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.card-rig-c {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 20rpx;
				}

				.card-rig-t-price {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #F71515;
				}
			}
		}

		.card-f {
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 24rpx;
			color: #666666;
		}
	}

	.form {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.form-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
			margin-bottom: 26rpx;

			text {
				color: #FF8400;
				font-size: 24rpx;
			}
		}

		.form-input {
			width: 100%;

			&>input {
				width: 690rpx;
				height: 80rpx;
				background: #F0F0F0;
				border-radius: 6rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
			}

		}

		.upload {
			width: 240rpx;
			height: 140rpx;

			border-radius: 6rpx;

			.upload-item-add {
				background: #F0F0F0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.upload-item-img {
				background: #F0F0F0;
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.radio {
			display: flex;
			flex-wrap: wrap;

			.radio-item {
				height: 53rpx;
				border-radius: 26rpx;
				border: 1px solid #999999;
				padding: 14rpx 48rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			.radio-item-ac {
				background: #12B475;
				border-radius: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				border: none;
			}
		}

		.textarea {
			textarea {
				width: 100%;
				height: 160rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 29rpx 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}

			.textarea-ac {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}
		}

		.price {
			.price-input {
				display: flex;
				align-items: center;

				input {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 32rpx;
					color: #FF4B4B;
					width: 321rpx;
					height: 74rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 0 25rpx;
					margin-right: 20rpx;
				}

				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #131313;
			}
		}
	}

	.video {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.video-title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 26rpx;

			.video-title-l {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #131313;

			}

			.video-title-r {
				display: flex;
				align-items: center;

				.video-title-r-nums {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-right: 32rpx;
				}

				.video-title-r-upload {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 28rpx;
					color: #12B475;
				}
			}
		}

		.video-list {
			width: 100%;

			.video-list-item {
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;

				.video-list-item-img {
					width: 272rpx;
					height: 153rpx;
				}

				.video-list-item-rig {
					flex: 1;
					min-width: 0;
					padding-left: 20rpx;

					.video-list-item-rig-t {
						height: 67rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #131313;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-bottom: 20rpx;
					}

					.video-list-item-rig-footer {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						.video-list-item-rig-c {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							margin-bottom: 10rpx;

						}

						.video-list-item-rig-t-price {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #FF1B1B;
						}

						.video-list-item-rig-footer-r {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #12B475;
						}
					}
				}
			}
		}
	}

	.btns {
		width: 578rpx;
		height: 86rpx;
		background: #12B475;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(177, 177, 177, 0.45);
		border-radius: 43rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.edit {
		width: 690rpx;
		margin: 0 auto;

		.edit-title {
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 28rpx;
			color: #131313;
			margin-bottom: 31rpx;
		}

		.edit-list {
			width: 100%;
			background: #FFFFFF;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 34rpx 34rpx 34rpx 0;
			margin-bottom: 10rpx;

			.edit-list-c {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 38rpx;

				.edit-list-c-num {
					width: 100rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					text-align: center;
				}

				.edit-list-c-r {
					flex: 1;
					min-width: 0;

					.edit-list-c-r-header {
						display: flex;
						align-items: center;
						margin-bottom: 28rpx;

						.edit-list-c-r-header-l {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #131313;
							flex: 1;
							min-width: 0;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							padding-right: 20rpx;
						}

						.edit-list-c-r-header-edit {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #12B475;
						}

					}

					.edit-list-c-r-time {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			.edit-list-footer {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				view {
					display: flex;
					align-items: center;

					image {
						width: 37rpx;
						height: 37rpx;
						margin-right: 17rpx;
					}

					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #131313;
				}

				view:last-child {
					margin-left: 71rpx;
				}
			}
		}
	}

	.edit-list-c-r-header-del {
		margin-left: 10rpx;
		color: #F71515 !important;
	}
	.video-list-item-img {
		width: 272rpx * 0.9;
		height: 153rpx * 0.9;
		margin-right: 20rpx;
	}
</style>